<template>
  <el-main :loading="loading">
    <div class="dashboard-editor-container">
      <el-row :gutter="12" :style="{ marginBottom: '12px' }" type="flex" justify="space-between">
        <el-col>
          <el-card>
            <div class="info-card">
              <el-image
                class="info-card-img"
                :src="memberImg"
              />
              <div class="info-card-text">
                <div>学生总量 (人)</div>
                <div class="numbers">{{ $formatNumber(count_lec_sum) }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card>
            <div class="info-card">
              <el-image
                class="info-card-img"
                :src="teacherImg"
              />
              <div class="info-card-text">
                <div>教师总量 (人)</div>
                <div class="numbers">{{ $formatNumber(count_lec_sum) }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card>
            <div class="info-card">
              <el-image
                class="info-card-img"
                :src="offlineImg"
              />
              <div class="info-card-text">
                <div>线上订单数 (个)</div>
                <div class="numbers">{{ $formatNumber(count_onl_sum) }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card>
            <div class="info-card">
              <el-image
                class="info-card-img"
                :src="onlineImg"
              />
              <div class="info-card-text">
                <div>资料总订单 (个)</div>
                <div class="numbers">{{ $formatNumber(count_off_sum) }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card>
            <div class="info-card">
              <el-image
                class="info-card-img"
                :src="orderImg"
              />
              <div class="info-card-text">
                <div>面授总订单 (个)</div>
                <div class="numbers">{{ $formatNumber(count_mat_sum) }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-card :bordered="false" :body-style="{ padding: '0' }">
        <div slot="header" class="clearfix">
          <el-radio-group v-model="statisticalType" size="small">
            <el-radio-button label="online">网课售卖量</el-radio-button>
            <el-radio-button label="material">资料订单量</el-radio-button>
            <el-radio-button label="offline">面授课程量</el-radio-button>
          </el-radio-group>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            icon="el-icon-refresh"
            @click="hanldeRefresh"
          >刷新</el-button>
        </div>
        <div class="salesCard">
          <el-row>
            <el-col :span="20">
              <line-chart :chart-data="chartData" />
            </el-col>
            <el-col :span="4">
              <div class="line-info">
                <div class="line-info-item">今日 <span class="numbers">{{ $formatNumber(todayNumber) }}</span></div>
                <div class="line-info-item">昨日同比 <span class="numbers">{{ $formatNumber(yestodayNumber) }}</span></div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </el-main>
</template>

<script>
import LineChart from './components/LineChart.vue'
import { sysOrderBill } from '@/api/admin/sys-finance'
import member_amount from '@/assets/bill/member_amount.jpg'
import teacher_total from '@/assets/bill/member_total.jpg'
import recharge_total from '@/assets/bill/recharge_total.jpg'
import card_lock from '@/assets/bill/card_lock.jpg'
import order_img from '@/assets/bill/order_img.jpg'

const chartData = {
  xAxis: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    padding: [5, 10]
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: false
    }
  },
  legend: {
    data: ['今日', '昨日']
  },
  series: []
}

export default {
  name: 'SysBillSystem',
  components: {
    LineChart
  },
  data() {
    return {
      loading: true,
      chartData,
      count_lec_sum: 0,
      count_stu_sum: 0,
      count_mat_sum: 0,
      count_onl_sum: 0,
      count_off_sum: 0,
      todayNumber: 0,
      yestodayNumber: 0,
      tabInfo: {
        online: {
          today: 0,
          yestoday: 0,
          data: {}
        },
        offline: {
          today: 0,
          yestoday: 0,
          data: {}
        },
        material: {
          today: 0,
          yestoday: 0,
          data: {}
        }
      },
      statisticalType: '',
      memberImg: member_amount,
      teacherImg: teacher_total,
      orderImg: order_img,
      onlineImg: recharge_total,
      offlineImg: card_lock
    }
  },
  watch: {
    statisticalType(n, o) {
      this.chartData.xAxis = this.tabInfo[n].data.xAxis
      this.chartData.series = this.tabInfo[n].data.series
      this.todayNumber = this.tabInfo[n].today
      this.yestodayNumber = this.tabInfo[n].yestoday
      this.statisticalType = n
      console.log(this.todayNumber, 'this.todayNumber', this.yestodayNumber, 'this.yestodayNumber', this.tabInfo[n].data)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    hanldeRefresh() {
      console.log(this.statisticalType, 'statisticalType')
      this.getList()
    },
    getList() {
      this.loading = true
      try {
        sysOrderBill().then(response => {
          this.statisticalType = 'online'
          this.count_stu_sum = response.data.count_stu_sum
          this.count_lec_sum = response.data.count_lec_sum
          this.count_onl_sum = response.data.count_onl_sum
          this.count_off_sum = response.data.count_off_sum
          this.count_mat_sum = response.data.count_mat_sum
          const tabInfo = {
            online: {
              today: response.data.count_onl_today,
              yestoday: response.data.count_onl_yesterday,
              data: {
                series: [
                  {
                    name: '昨日',
                    smooth: true,
                    type: 'line',
                    itemStyle: {
                      normal: {
                        color: '#3888fa',
                        lineStyle: {
                          color: '#3888fa',
                          width: 2
                        },
                        areaStyle: {
                          color: '#f3f8ff'
                        }
                      }
                    },
                    data: response.data?.count_onl_hour_count_list_yesterday ?? [],
                    animationDuration: 2800,
                    animationEasing: 'cubicInOut'
                  },
                  {
                    name: '今日',
                    itemStyle: {
                      normal: {
                        color: '#FF005A',
                        lineStyle: {
                          color: '#FF005A',
                          width: 2
                        }
                      }
                    },
                    smooth: true,
                    type: 'line',
                    data: response.data?.count_onl_hour_count_list ?? [],
                    animationDuration: 2800,
                    animationEasing: 'quadraticOut'
                  }
                ],
                xAxis: {
                  data: response.data.count_onl_x_list ?? [],
                  boundaryGap: false,
                  type: 'category',
                  axisTick: {
                    show: false
                  }
                }
              }
            },
            offline: {
              today: response.data.count_off_today,
              yestoday: response.data.count_off_yesterday,
              data: {
                series: [
                  {
                    name: '昨日',
                    smooth: true,
                    type: 'line',
                    itemStyle: {
                      normal: {
                        color: '#3888fa',
                        lineStyle: {
                          color: '#3888fa',
                          width: 2
                        },
                        areaStyle: {
                          color: '#f3f8ff'
                        }
                      }
                    },
                    data: response.data?.count_off_hour_count_list_yesterday ?? []
                  },
                  {
                    name: '今日',
                    itemStyle: {
                      normal: {
                        color: '#FF005A',
                        lineStyle: {
                          color: '#FF005A',
                          width: 2
                        }
                      }
                    },
                    smooth: true,
                    type: 'line',
                    data: response.data?.count_off_hour_count_list ?? []
                  }
                ],
                xAxis: {
                  data: response.data.count_onl_x_list ?? [],
                  boundaryGap: false,
                  type: 'category',
                  axisTick: {
                    show: false
                  }
                }
              }
            },
            material: {
              today: response.data.count_mat_today,
              yestoday: response.data.count_mat_yesterday,
              data: {
                series: [
                  {
                    name: '昨日',
                    smooth: true,
                    type: 'line',
                    itemStyle: {
                      normal: {
                        color: '#3888fa',
                        lineStyle: {
                          color: '#3888fa',
                          width: 2
                        },
                        areaStyle: {
                          color: '#f3f8ff'
                        }
                      }
                    },
                    data: response.data.count_mat_hour_count_list_yesterday ?? []
                  },
                  {
                    name: '今日',
                    itemStyle: {
                      normal: {
                        color: '#FF005A',
                        lineStyle: {
                          color: '#FF005A',
                          width: 2
                        }
                      }
                    },
                    smooth: true,
                    type: 'line',
                    data: response.data.count_mat_hour_count_list ?? []
                  }
                ],
                xAxis: {
                  data: response.data.count_onl_x_list ?? [],
                  boundaryGap: false,
                  type: 'category',
                  axisTick: {
                    show: false
                  }
                }
              }
            }
          }
          this.tabInfo = { ...tabInfo }
          this.chartData.xAxis = this.tabInfo[this.statisticalType].data.xAxis
          this.chartData.series = this.tabInfo[this.statisticalType].data.series
        }).finally(() => {
          this.loading = false
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 12px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .info-card {
    display: flex;
    &-img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }
    &-text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 8px;
      padding-left: 12px;
      font-size: 12px;
    }
  }

  .numbers {
    font-size: 18px;
    font-weight: 500;
  }

  .line-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    // align-items: center;
    height: 350px;
    font-size: 12px;
    padding-left: 16px;
    &-item {
      display: flex;
      justify-content: space-between;
      &:nth-of-type(1) {
        margin-bottom: 48px;
      }
    }
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

::v-deep .el-tabs__item{
   padding-left: 16px!important;
   height: 50px;
   line-height: 50px;
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
